<template>
  <div class="emergency-page">

    <div class="emergency-main">
      <div class="emergency-main-form">
        <Form :model="formItem" :label-width="80"  ref="form">
          <FormItem label="加急天数">
            <RadioGroup v-model="formItem.days" v-if="formItem.daysOptions.length > 0">
              <Radio :key="item.id"  :label="item.id" v-for="item in formItem.daysOptions">
                <span>{{item.days + '天 ' + item.rate}}</span>
              </Radio>
            </RadioGroup>
            <span v-else>不加急</span>
          </FormItem>
        </Form>
      </div>
    </div>

    <bottomBtn @next="pageNext" @prev="pagePrev">
      <button slot="center" class="ivu-btn ivu-btn-diy ivu-btn-large" type="button" @click="skip">
        <span>跳过</span>
      </button>
    </bottomBtn>

    <Modal
      v-model="modal.state"
      title="提示"
      :mask-closable="false"
      :closable="false"
      @on-ok="asyncOK">
      <h2>
        是否确认{{modal.text}}？
      </h2>
    </Modal>
  </div>
</template>

<script>
  import {getEmergency} from "api/getEmergency";
  import {mapMutations, mapState} from 'vuex';
  import bottomBtn from "base/bottomBtn.vue";

  export default {
    name: "emergency",
    components: {
      bottomBtn
    },
    data: function () {
      return {
        modal: {
          state: false,
          text: "加急"
        },
        formItem: {
          days:"",
          daysOptions:[
            {
              "id": 1,
              "days": 3,
              "rate": "0.20%"
            },
            {
              "id": 2,
              "days": 4,
              "rate": "0.12%"
            }
          ]
        }
      }
    },
    methods: {
      pageNext() {
        this.modal.state = true
      },
      pagePrev() {
        this.setNavIndex(this.navIndex - 1);
      },
      skip(){
        this.setNavIndex(this.navIndex + 1);
      },
      asyncOK() {
        if(this.formItem.days !== ""){
            this.setNavIndex(this.navIndex + 1);
            this.setEmergency({
                id:this.formItem.days
            })
        }else{
            this.$Notice.warning({
                title: '提示',
                desc: '不能为空'
            });
        }
      },
      async _getEmergency(){
          try{
            let Rs = await getEmergency({goods:this.goodsId});
            this.formItem.daysOptions = Rs.data.data;
          }catch (err){
            console.log(err)
          }
      },
      ...mapMutations({
         "setNavIndex": 'SET_NAVINDEX',
         "setUserinfor": "SET_USERINFOR",
          "setEmergency":"SET_EMERGENCY"
      }),
    },
    activated(){
       this._getEmergency();
    },
    computed: {
      ...mapState([
        'type',
        'goodsId',
        'navIndex',
        'liningId',
        "stereotype",
        'designData',
        'measureData',
        'measureMore'
      ])
    }
  }
</script>

<style lang="less">
  .emergency-page {
    .emergency-main {
      &-form{
        padding: 25px 0;
      }
    }
  }
</style>
